import { styled } from "@linaria/react"
import { Button, Input, View, Image } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState } from "react";
import { callContainerPost } from "@/tools/useCallContainer";

export default function AddCommentBar({dishes_id, updateComments}) {
  const safeAreaBottom = Taro.getWindowInfo().safeArea?.bottom ?? 0;
  const [comment, setComment] = useState("");
  const handleInputChange = (e) => {
    setComment(e.detail.value);
  }
  const handleSubmit = () => {
    if (!comment.trim()) {
      console.log("评论不能为空");
      return;
    }
    callContainerPost(`/dishescomments/${dishes_id}/users`, {"title":"dishesComment", "body":comment}).then(()=>updateComments());
  }
  return (
    <AddCommentBarView>
      <CommentInput 
      value={comment}
      onInput={handleInputChange}
      placeholder="输入评论..."
      />
      <SubmitButton onClick={()=>handleSubmit()}>
        <SubmitImage src='cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/send_mail_email_letter_envelope_icon.png' mode="aspectFit">

        </SubmitImage>
      </SubmitButton>
    </AddCommentBarView>
  )
}


// const AddCommentBarView = styled(View)`提交评论
//   padding: 10px;
// `;

// const CommentInput = styled(Input)`
//   flex: 1;
//   border: 1px solid #ccc;
//   border-radius: 4px;
//   padding: 5px;
//   margin-right: 10px;
// `;

// const SubmitButton = styled(Button)`
//   background-color: #3498db;
//   height: 72px;
//   color: #fff;
//   border: none;
//   border-radius: 4px;
//   padding: 8px 12px;
//   cursor: pointer;
// `;
const AddCommentBarView = styled(View)`
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff; /* 白色背景 */
`;

const CommentInput = styled(Input)`
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 14px;
  padding-left: 20px;
  height: 60px;
  margin-right: 10px;
  font-size: 26px; /* 调大字体大小 */
  background-color: #fff; /* 白色背景 */
  color: #333; /* 字体颜色 */
`;

const SubmitButton = styled(Button)`
  background-color: aliceblue; /* 更改为淡蓝色按钮 */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 12px;
  cursor: pointer;
  font-size: 23px; /* 调大字体大小 */
  display: flex;
  justify-content: center;
  align-items: center;
`;

const SubmitImage = styled(Image)`
  width: 60px;
  height: 50px;
`